<template>
  <div id="centerRight1">
    <div class="message_scroll_box" style="height: 100%">

      <vue-seamless-scroll :class-option="defaultOption" :data="list" class="warp">
        <div class="message_scroll" v-for="(item, index) in list" :key='index'>
          <div class="scroll_top">
            <span class="scroll_level scroll_level01">{{item.period}}</span>
            <a class="localize"></a>
            <span class="scroll_timer">{{item.date}}</span>
          </div>
          <div class="msg_cage">
            <a class="localize_title">{{item.title}}</a>
          </div>
          <div class="msg_cage">
            <a class="localize_msg">{{item.content}}</a>
          </div>
        </div>
      </vue-seamless-scroll>
    </div>
  </div>
</template>

<script>

  import vueSeamlessScroll from 'vue-seamless-scroll'

  export default {
    components: { vueSeamlessScroll },
    computed: {
      defaultOption() {
        return {
          step: 0.2, // 数值越大速度滚动越快
          limitMoveNum: 4, // 开始无缝滚动的数据量
          hoverStop: true, // 是否开启鼠标悬停stop
          direction: 1, // 0向下 1向上 2向左 3向右
          openWatch: true, // 开启数据实时监控刷新dom
          singleHeight: 65, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
          singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
          waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        }
      },
    },
    data() {
      return {
        list: [{
          period: "第一期",
          title: "本期应支付金额为：2584561元",
          date: "2023-05-25",
          content: "一标：841484元，二标：1241510元，三标：501567元",
        },{
          period: "第二期",
          title: "本期应支付金额为：8452040元",
          date: "2023-06-25",
          content: "一标：2486410，二标：3842549元，三标：2123081元",
        },{
          period: "第三期",
          title: "本期应支付金额为：7684216元",
          date: "2023-07-25",
          content: "一标：1842015元，二标：4265485元，三标：1576716元",
        },{
          period: "第四期",
          title: "本期应支付金额为：12548768元",
          date: "2023-08-25",
          content: "一标：3541205元，二标：6841520元，三标：2166043元",
        },{
          period: "第五期",
          title: "本期应支付金额为：8465129元",
          date: "2023-09-25",
          content: "一标：2546123元，二标：3515487元，三标：2403519元",
        }]
      }
    }
  }
</script>

<style lang="scss" scoped>
  #centerRight1 {
    padding: 16px;
    height: 45vh;
    width: 100%;
  }
  .message_scroll{
    border: rgba(12,122,200,0.5) 1px solid;
    background-color: rgba(20,66,125,0.12);
    height: 10vh;
    cursor: pointer;
    margin-bottom: 6px;
    border-radius: 8px;
  }
  .scroll_top{
    height: 25px;
  }
  .scroll_title{
    float: left;
    background-image: url("~@/assets/screen/screen1/pushmessage_class.png");
    background-repeat: no-repeat;
    width: 150px;
    line-height: 25px;
    color: white;
    font-size: 14px;
    text-align: center;
    border-radius: 8px;
  }
  .scroll_level{
    float: left;
    background-repeat: no-repeat;
    line-height: 25px;
    width: 56px;
    background-position-y:3px;
    color: white;
    font-size: 14px;
    text-align: center;
    margin-left: 8px;
  }
  .scroll_level01{
    background-image:url("~@/assets/screen/screen1/pushmessage_level01.png");
  }
  .scroll_level02{
    background-image:url("~@/assets/screen/screen1/pushmessage_level02.png");
  }
  .scroll_level03{
    background-image:url("~@/assets/screen/screen1/pushmessage_level03.png");
  }
  .scroll_timer{
    color: #4a97da;
    font-size: 14px;
    line-height: 25px;
    text-align: right;
    display: block;
    float: right;
    margin-right: 5px;
  }
  .msg_cage{
    padding-left: 10px;
    padding-right: 6px;
    height: 20px;
    overflow: hidden;
    margin-top: 8px;
  }
  .localize_title{
    color: #2c85d2;
  }
  .localize_msg{
    font-size: 16px;
    color: white;
  }
  .warp {
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
    /*height: 270px;*/
  }
</style>
